<template>
	<view class="noticeLayout">
		<view class="title">
			<view class="tag">
				<uni-tag inverted text="置顶" type="error" />
			</view>
			<view class="font">{{ noticeDetail.title }}</view>			
		</view>
		
		<view class="info">
			<view class="item">{{ noticeDetail.author }}</view>					
			<view class="item">
				<uni-dateformat :date="Date.now()" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>	
		</view>
		
		
		<view class="content">
			<rich-text :nodes="noticeDetail.content"></rich-text>
		</view>
		
		<view class="count">
			阅读 {{ noticeDetail.view_count }}	
		</view>
	</view>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { noticeDetailAPI } from '@/api/notice.js'

const id = ref(null)
const noticeDetail = ref({})

onLoad((options) => {
	id.value = options.id
})

onBeforeMount(async () => {
	const result = await noticeDetailAPI({ id: id.value })
	noticeDetail.value = {
			...result.data,
			author: result.data.author.replace(/咸虾米/g, '青冥'),
			title: result.data.title.replace(/咸虾米/g, '青冥'),
			content: result.data.content.replace(/咸虾米/g, '青冥')
	}
})
</script>

<style lang="scss" scoped>
.noticeLayout {
	padding:30rpx;
	
		.title {
			font-size: 40rpx;
			color:#111;
			line-height: 1.6em;
			padding-bottom:30rpx;
			display: flex;
			
			.tag {
				transform: scale(0.8);
				transform-origin: left center;
				flex-shrink: 0;	
			}
			.font {
				padding-left:6rpx;
			}
		}
		
		.info {
			display: flex;
			align-items: center;
			color:#999;
			font-size: 28rpx;
			
			.item {
				padding-right: 20rpx;
			}
		}
		
		.content {
			padding:50rpx 0;
		}
		
		.count {
			color:#999;
			font-size: 28rpx;
		}
}
</style>
